<script setup lang="ts">
import { ref, onMounted } from "vue";
import { UseLibraryState } from "../library_state";
import LoginView from "./LoginView.vue";
import {try_get_book_count} from './book'
import { ElNotification } from "element-plus";


const state = UseLibraryState();
const book_count=ref(0)
onMounted(async () => {
  await get_book_count()
});
const get_book_count=async ()=>{
  try {
    book_count.value=await try_get_book_count();
  } catch (error) {
    ElNotification.error({
      message:'获取书籍总数失败!\n'+error,
      title:'Error',
      duration:10000,
    })
  }
}
</script>

<template>
<div class="flex flex-col items-center justify-center h-full">
  <el-card class="card">
    <template #header>
    <h1 class="card-h1">✨欢迎光临✨</h1>
  </template>
      <p class="mb-2">
        目前图书馆共有<span class="font-bold px-1 text-green-500">{{
          book_count
        }}</span>册图书
      </p>
  </el-card>
<el-card class="card">
  <template #header>
    <h1 class="card-h1">⭐使用提示⭐</h1>
  </template>
      <p class="mb-2">
        若要检索馆藏图书, 请点击<span class="font-bold px-1 underline">检索</span>页面
      </p>
      <p class="mb-2" v-if="state.is_reader">
        若要借还馆藏图书, 请点击<span class="font-bold px-1 underline">读者</span>页面
      </p>
        <p class="mb-2" v-if="state.is_manager">
        若要管理馆藏图书, 请点击<span class="font-bold px-1 underline">管理</span>页面
      </p>
      <p class="mb-2" v-if="!state.is_login">
        使用更多功能, 请点击右上角<span class="font-bold px-1 underline">登录</span>
      </p>
      <p class="mb-2" v-if="state.is_login">
        如果在公共电脑上登录, 请点击右上角<span class="font-bold px-1 underline">登出</span>
      </p>
</el-card>
</div>
</template>

<style scoped>
  .card{
    @apply w-2/3 mb-4 bg-gray-200 text-2xl min-w-[300px] max-w-[800px];
  }
  .card-h1{
    @apply font-bold bg-gray-400 text-white py-2 text-4xl;
    text-shadow: 1px 1px 0 black;
  }

</style>
<style>
  .el-card__header{
    padding: 0;
  }
</style>